<template>
  <div id="map"></div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import 'ol/ol.css';
import EchartsLayer from 'ol-echarts';

@Component({
  components: {}
})
export default class MapTest extends Vue {
  private map: Map;
  private mounted() {
    this.initOpenLayersMap();
  }
  private initOpenLayersMap() {
    this.map = new Map({
      target: 'map',
      view: new View({
        center: [113.53450137499999, 34.44104525],
        projection: 'EPSG:4326',
        zoom: 5 // resolution
      }),
      layers: [
        new TileLayer({
          source: new XYZ({
            url:
              'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnline' +
              'StreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
          })
        })
      ]
    });
    this.initEcharts();
  }

  private initEcharts() {
    const options = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'right',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '30',
          coordinates: [110.53450137499999, 33.44104525],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          name: '访问来源',
          type: 'pie',
          radius: '30',
          coordinates: [113.53450137499999, 34.44104525],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        {
          name: '访问来源',
          type: 'pie',
          radius: '30',
          coordinates: [110.53450137499999, 38.44104525],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    const echartslayer = new EchartsLayer(options, {
      target: '.ol-overlaycontainer',
      source: '',
      destination: '',
      hideOnMoving: true,
      forcedRerender: false,
      forcedPrecomposeRerender: false
    });
    echartslayer.appendTo(this.map);
  }
}
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
